
@keyframes box-round{
    from {
        background-color: rgb(223, 197, 51);
    }
    50% {
        transform: rotate(180deg) scale(1.5);
        background-color: greenyellow;
    }
    to {
        transform: rotate(360deg) ;
        background-color: rgb(223, 197, 51);
    }
}
.box{
    width: 200px;
    height: 200px;
    background-color: rgb(238, 129, 129);
    margin: 100px auto;
    animation-name:  box-round;
    /* animation-duration: 2s; */
    /* animation-iteration-count: infinite; */
    /* animation-timing-function: linear; */
    /* animation-delay:2s; */
    /* animation-play-state: paused; */
    animation: box-round 2s linear  infinite paused ;
}
.box:hover{
    animation-play-state: running;
}